<template>
    <div>
      <Nav></Nav>
      <Nav2></Nav2>

      <Swipermy2></Swipermy2>

      <ul class="ulone">
        <li v-for="item in data2">
          <img :src="item" alt="">
        </li>
      </ul>

      <div class="friday">
        <div class="fri-left">
          <img src="/static/lyl/nao.png" alt="">
          <span>礼拜五</span>
          <span>Firiday</span>
        </div>
        <div class="fri-right">
          <span>距离开始</span>
          <span class="block">{{day}}天</span>
          <span class="block">{{hour}}</span>
          <span class="s1">:</span>
          <span class="block">{{minete}}</span>
          <span class="s1">:</span>
          <span class="block">{{secnd}}</span>
          <span @click="detail2()">更多></span>
        </div>
      </div>
      <Swipermy></Swipermy>

      <div class="friday">
        <div class="fri-left">
          <img src="/static/lyl/shui.png" alt="">
          <span>新鲜水果</span>
          <span>采自新疆优质水果生产基地，品质一流 </span>
        </div>
        <div class="fri-right2">
          <span @click="detail2()">更多></span>
        </div>
      </div>
      <Moudel></Moudel>

      <div class="friday">
        <div class="fri-left">
          <img src="/static/lyl/xian.png" alt="">
          <span>水产海鲜</span>
          <span>国内外新鲜到港的鱼虾蟹贝，我们全都有</span>
        </div>
        <div class="fri-right2">
          <span @click="detail2()">更多></span>
        </div>
      </div>
      <Moudel></Moudel>

      <div class="friday">
        <div class="fri-left">
          <img src="/static/lyl/rou.png" alt="">
          <span>肉类禽蛋</span>
          <span>采自新疆优质水果生产基地，品质一流 </span>
        </div>
        <div class="fri-right2">
          <span @click="detail2()">更多></span>
        </div>
      </div>
      <Moudel></Moudel>

      <div class="friday">
        <div class="fri-left">
          <img src="/static/lyl/niu.png" alt="">
          <span>蛋奶速食</span>
          <span>国内外新鲜到港的鱼虾蟹贝，我们全都有</span>
        </div>
        <div class="fri-right2">
          <span @click="detail2()">更多></span>
        </div>
      </div>
      <Moudel></Moudel>

      <Footer></Footer>
    </div>
</template>

<script>
  import Nav from '../com/Nav'
  import Nav2 from '../com/Nav2'
  import Footer from '../com/Footer'
  import Swipermy from './Swiper-my'
  import Swipermy2 from './Swiper-my2'
  import Moudel from './Moudel'

    export default {
      name: "Home",
      components:{
        Nav,
        Nav2,
        Footer,
        Swipermy,
        Moudel,
        Swipermy2
      },
      data () {
        return {
          data2:['/static/lyl/hot1.png','/static/lyl/hot2.png','/static/lyl/hot2.png','/static/lyl/hot4.png',],
          day:0,
          hour:0,
          minete:0,
          secnd:0
        }
      },
      methods:{
        detail2(){
          this.$router.push('/expserver')
        }
      },
      mounted(){
        setInterval(function () {
          var date = new Date();
          var date2 = new Date(2019,0,7,16,0,0);
          var s = date2 - date;
          this.day = parseInt(s/1000/60/60/24);
          s-=this.day*24*60*60*1000;
          this.hour = parseInt(s/1000/60/60);
          s-=this.hour*60*60*1000;
          this.minete = parseInt(s/1000/60);
          s-=this.minete*60*1000;
          this.secnd = parseInt(s/1000);
          this.secnd = formatTime(this.secnd);
          this.minete = formatTime(this.minete);
          this.hour = formatTime(this.hour);
          this.day = formatTime(this.day);
          function formatTime(t){
            return t < 10 ? "0"+t : t;
          }
        }.bind(this),1000)

      }
    }

</script>

<style scoped>
  
  .ulone{
    width: 1280px;
    margin:20px auto;
    display: flex;
    justify-content: space-between;
  }
  .ulone img{
    width: 305px;
    transition: all 1s;
  }
  .ulone img:hover{
    transform: scale(1.5) translateY(20px);
  }
  .ulone li:nth-child(1) img:hover{
    transform: scale(1.5) translateY(20px) translateX(50px);
  }
  .ulone li:nth-child(4) img:hover{
    transform: scale(1.5) translateY(20px) translateX(-50px);
  }
  .friday{
    width: 1220px;
    margin:0 auto 20px;
    display: flex;
    justify-content: space-between;
    padding: 30px;
    background: #ebffe8;
    border-bottom:1px solid #498e3d;
  }
  .friday .fri-left img{
    width: 35px;
    vertical-align: bottom;
    margin-right: 20px;
  }
  .friday .fri-left span:nth-child(2){
    font-size: 30px;
    line-height: 36px;
    color: #498e3d;
    margin-right: 16px;
  }
  .friday .fri-left span:nth-child(3){
    font-size: 24px;
    line-height: 36px;
    color: #999;
  }
  .friday .fri-right{
    display: flex;
    justify-content: space-around;
  }
  .friday .fri-right span{
    font-size: 18px;
    line-height: 36px;
    cursor: pointer;
  }
  .friday .fri-right span:nth-child(1){
    font-size: 30px;
    line-height: 36px;
    color: #498e3d;
    margin-right: 17px;
  }
  .friday .fri-right .block{
    width: 60px;
    height: 40px;
    border-radius: 10px;
    background: #f08200;
    text-align: center;
    line-height: 40px;
    color: #fff;
    margin-right: 17px;
  }
  .friday .fri-right .s1{
    margin-right: 9px;
  }
  .fri-right2 span{
    font-size: 18px;
    line-height: 36px;
    cursor: pointer;
  }


</style>
